<template>
  <div>
    <a type="primary" @click="showDrawer"> 寝室信息 </a>
    <a-drawer
      title="寝室信息"
      :width="720"
      :visible="visible"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <h2>寝室号:{{this.dataSource.roomId}}</h2>
      <br>
      <a-form :form="form" layout="vertical" hide-required-mark @submit="handleSubmit">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="寝室备注">
              <a-input
                v-decorator="[
                  'memo',
                  {
                    rules: [{ required: false }],
                  },
                ]"
                :placeholder="this.dataSource.memo==''?'请输入备注':this.dataSource.memo"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="寝室长">
              <a-select
                v-decorator="[
                  'leaderId',
                  {
                    rules: [{ required: true, message: '请选择寝室长' }],
                  },
                ]"
                :placeholder="this.dataSource.leaderId==''?'请选择寝室长':this.dataSource.leaderId"
               >
                <a-select-option v-for="(item,index) in dataSource.student" :key="index" :value="item.studentId">
                {{item.studentId}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
             <a-form-item label="寝室人数">
              <a-select
                v-decorator="[
                  'number',
                  {
                    rules: [{ required: true, message: '请选择寝室人数' }],
                  },
                ]"
                :placeholder="this.dataSource.number==''?'请选择寝室人数':this.dataSource.number"
                v-model="dataSource.number"
               >
                <a-select-option v-for="(item,index) in [1,2,3,4]" :key="index" :value="item" >
                {{item}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <div v-for="(i,index) in this.dataSource.number" :key="index">
           <h2>学生{{i}}</h2>
           <a-row :gutter="16">
           <a-col :span="6">
            <a-form-item label="学号">
             <a-input
                v-decorator="[
                  'studentId_'+index,
                  {
                    rules: [{ required: true, message: '请输入学生学号' }],
                  },
                ]"
                :placeholder="dataSource.student[index].studentId==''?'请输入学生学号':dataSource.student[index].studentId"
              />
            </a-form-item>
           </a-col>
           <a-col :span="6">
            <a-form-item label="姓名">
              <a-input
                v-decorator="[
                  'name_'+index,
                  {
                    rules: [{ required: true, message: '请输入学生姓名' }],
                  },
                ]"
                :placeholder="dataSource.student[index].name==''?'请输入学生姓名':dataSource.student[index].name"
              />
            </a-form-item>
          </a-col>
           <a-col :span="6">
            <a-form-item label="手机号码">
              <a-input
                v-decorator="[
                  'phone_'+index,
                  {
                    rules: [{ required: true, message: '请输入手机号' }],
                  },
                ]"
                :placeholder="dataSource.student[index].phone==''?'请输入手机号':dataSource.student[index].phone"
              />
            </a-form-item>
          </a-col>
           <a-col :span="6">
            <a-form-item label="状态">
              <a-select
                v-decorator="[
                  'status_'+index,
                  {
                    rules: [{ required: true, message: '请选择学生状态' }],
                  },
                ]"
                :placeholder="dataSource.student[index].status==''?'正常':dataSource.student[index].status"
              >
                <a-select-option value="正常">
                  正常
                </a-select-option>
                <a-select-option value="请假">
                  请假
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          </a-row>
        </div>
       <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"> 
        <a-form-item>
        <a-button :style="{ marginRight: '8px' }" @click="onClose">
          取消
        </a-button>
        <a-button type="primary" html-type="submit">
          提交
        </a-button>
        </a-form-item>
      </div>
        
      </a-form>
      
    </a-drawer>
  </div>
</template>
<script>
import {mapActions} from "vuex"
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      dataSource: {
        key:0,
        roomId:512,
        number:3,
        leaderId:'8209190507',
        temperature:28.0,
        humility:0.4,
        status:'正常',
        memo:'',   
        student:[
          {
              key:0,
              studentId:'8209190507',
              roomId:512,
              name:'夏家豪',
              status:'请假',
              phone:'17812312323'
            },
            {
              key:1,
              studentId:'8209190508',
              roomId:512,
              name:'夏家豪1',
              status:'请假',
              phone:'17812312323'
            },
            {
              key:2,
              studentId:'8209190509',
              roomId:512,
              name:'夏家豪2',
              status:'请假',
              phone:'17812312323'
            },
            {
              key:3,
              studentId:'',
              roomId:512,
              name:'',
              status:'正常',
              phone:''
            },
        ]
      }
    };
  },
  methods: {
    ...mapActions({
      // getProductList:'product/getProductList',
      // addItem: 'item/addItem'
    }),
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
      this.form.resetFields();
    },
    openNotification(type,title,msg) {
      let iconType = ''
      let iconColor = ''
      if(type=='OK'){
        iconType = 'smile'
        iconColor = '#52c41a'
      }
      else
      {
        iconType = 'frown'
        iconColor = '#eb2f96'
      }
      this.$notification.open({
        message: title,
        description: msg,
        icon: h => h('a-icon', {
          props: {
            type: iconType,
            theme: 'twoTone',
            'two-tone-color': iconColor
          }
        }),
       
      });
    },
    handleSubmit(e) {
      e.preventDefault();
      let self = this
      this.form.validateFields((err, values) => {
        if (!err) {
          // // console.log('Received values of form: ', values);
          // this.addItem(values).then((res)=>{
          //   this.openNotification("OK","新增宠物信息成功",res)
          //   this.$emit('update-item-list')
          //   self.onClose()
          // },(error)=>{
          //   this.openNotification("NOK","新增宠物信息失败",error)
          //   self.onClose();
          // })
        }
      });
    },
  },
  mounted(){
    // this.getProductList({type: 'search', id:''}).then((res) => {
    //     // console.log(res)
    //     let i = 0
    //     this.dataSource.length = 0
    //     for(let item of res){
    //         item.key = i++
    //         this.dataSource.push(item);
    //     }
    //   }, (error) => {
    //     // console.log(error)
    //   })
    }
};
</script>

<style lang="scss" scoped>

</style>